<template>
    <div id="mapbox_container" style="outline: 0px transparent !important;">
        <MapLayerSwitcher :layers="layers" />
        <timeAxis v-if="!showTimeAxis"></timeAxis>
    </div>
</template>

<script setup>
import { version, onMounted, computed, watch, ref } from 'vue';
import { mapApi } from './api/mapApi.ts' // 地图api库
import { defaultCoordinates } from "./config/ip.ts";
import { FileManager } from "@/components/cme-base2D/core/layerDataManager";
import xinjiang from "@/assets/data/mapJson/650000.json";
import timeAxis from '@/components/timeAxis/index.vue'
import { getAssets } from "@/utils";
import mapStore from "@/stores/modules/map.ts"
import MapLayerSwitcher from '@/components/map-layer-switcher/index.vue'
import { locationIp } from "./config/ip.ts";
import { initRightMenu } from "./coreFunctions/rightMenuManager";
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import { circle } from 'turf';
let map = null
const props = defineProps({
    isMake: {
        type: Boolean,
        default: false
    }
})
const mapStores = mapStore()

onMounted(() => {
    initMap();  // 初始化地图
})

const layers = [
    { id: 'onLineVectorMap', name: '在线矢量', path: getAssets('images/onLineVectorMap.png') },
    { id: 'onlineDarkSkyMap', name: '在线影像', path: getAssets('images/onlineDarkSkyMap.png') },
    { id: 'darkSkyMap', name: '离线影像', path: getAssets('images/darkSkyMap.png') },
    { id: 'googleMap', name: '谷歌底图', path: getAssets('images/googleMap.png') }
]
// 计算属性控制时间轴显示
const showTimeAxis = computed(() => {
    return !props.isMake
})

// 监听器
watch(() => mapStores.timelineParameters, (newVal) => {
    mapApi.modelMove.callPlayBackMoveModel(newVal.time)
})
const initMap = () => {
    map = mapApi.map.initMap('mapbox_container', { center: [87.617733, 43.792818], zoom: 2, projection: 'globe' }) // 初始化地图
    mapApi.camera.flyTo(defaultCoordinates, { zoom: 4.5 }) // 飞到指定位置
    mapApi.rander.loadBoundaryLine('testJIJLIN', xinjiang) // 加载行政区域
    mapApi.rander.loadCluster()

    mapApi.modelMove.newReal()
    // const draw = new MapboxDraw({
    //     displayControlsDefault: false,
    //     // Select which mapbox-gl-draw control buttons to add to the map.
    //     controls: {
    //         polygon: true,
    //         point:true,
    //         trash: true,
    //         line_string: true,

    //     },
    //     // Set mapbox-gl-draw to draw by default.
    //     // The user does not have to click the polygon control button first.
    //     // defaultMode: 'draw_polygon'
    // });
    // const draw = new MapboxDraw({
    //     displayControlsDefault: false, // 禁用默认控件
    // });



    // map.addControl(draw);
    //   draw.changeMode('draw_line_string'); // 切换到线绘制模式
    initRightMenu(map) // 初始化右键菜单事件

    // DrawCon = new MapboxDraw(); //生成绘图工具
    // map.addControl(DrawCon, "top-left"); //添加至地图上
    // const models = [
    //     { id: 'model1', coordinates: [122.414, 37.776, 103200], bearing: 0 },
    //     { id: 'model2', coordinates: [120.415, 37.775, 200000], bearing: 0 },
    //     { id: 'model3', coordinates: [-197.413, 37.777, 130005], bearing: 90 }
    // ];

    // let modelData = [
    //     {
    //         id: 'tst1',
    //         name: 'tst1',
    //         epoch: 0,// 起始时间
    //         model: {
    //             img: '',  // 图片路径
    //             scale: 0.5,
    //             type: ''
    //         },
    //         position: {
    //             coordinate: [],
    //             time: [],
    //             information: []
    //         }
    //     }
    // ]
    // FileManager.analysisCSV(getAssets('data/csv/B3435_20241109_02.csv')).then(res => {
    //     res.forEach((item) => {
    //         modelData[0].position.coordinate.push([item[4], item[5], item[6]])
    //         modelData[0].position.time.push(new Date(item[2] + " " + item[3]).getTime())
    //         modelData[0].position.information.push({})
    //     })
    //     console.log(modelData);
    //     modelData[0].epoch = modelData[0].position.time[0]
    //     const czml = {
    //         id: 'document',  // czml标识 / 数据标识
    //         clock: {
    //             interval: `${modelData[0].position.time[0]}/${modelData[0].position.time[modelData[0].position.time.length - 1]}`,  // 时间区间 "开始时间戳/结束时间戳"
    //             currentTime: `${modelData[0].position.time[0]}`, //  当前时间 时间戳
    //             multiplier: '1', // 播放 速度  默认为1
    //             loopPlayback: 0 // 0循环 1 不循环
    //         },
    //         data: modelData
    //     }
    //     mapApi.modelMove.callPlayBackLoadModell(czml)

    //     mapStores.setTime({
    //         startTime: czml.clock.interval.split('/')[0],
    //         endTime: czml.clock.interval.split('/')[1]
    //     })
    // })


    // debugger
    // 回放
    // models.forEach((item, index) => {
    //     modelData.push({
    //         id: item.id,
    //         name: item.id,
    //         epoch: 0,// 起始时间
    //         model: {
    //             img: '',  // 图片路径
    //             scale: 0.5,
    //             type: ''
    //         },
    //         position: [{
    //             "coordinate": [
    //                 "117.6873",
    //                 "30.7369",
    //                 "522"
    //             ],
    //             "time": 1736158980,
    //             "information": {
    //                 "北向速度": "-999",
    //                 "东向速度": "-999",
    //                 "天向速度": "0",
    //                 "航向角": "214",
    //                 "大气静压": "-999",
    //                 "大气静温": "-999",
    //                 "风速": "0",
    //                 "风向": "0",
    //                 "当前焰弹总数量": "0",
    //                 "左焰条焰弹总数量": "0",
    //                 "右焰条焰弹总数量": "0",
    //                 "结冰状态": "0",
    //                 "焰条状态": "0",
    //                 "地速": "0",
    //                 "真空速": "0"
    //             }
    //         }]
    //     })
    // })


    // {
    // "code": 200,
    // "message": "OK",
    // "data": {
    //     "id": "1",
    //     "clock": {
    //         "interval": "1733395201/1736159018"
    //     },
    //     "data": [
    //         {
    //             "id": "20250106_1_1",
    //             "name": "20250106_1_1",
    //             "flight": "20250106_1_1",
    //             "position": [







    // 实时

    // mapApi.modelMove.realTimeLoadModel(models) // 加载模型

    // setTimeout(() => {
    //     setInterval(() => {
    //         const lat = models[0].coordinates[1] + 0.05
    //         const lon = models[0].coordinates[0] + 0.05

    //         mapApi.modelMove.realTImeMoveModel('model1', [lon, lat, 10200]) // 移动模型
    //         const lat1 = models[1].coordinates[1] + 0.05
    //         const lon1 = models[1].coordinates[0] + 0.05
    //         mapApi.modelMove.realTImeMoveModel('model2', [lon1, lat1, 10200]) // 移动模型
    //     }, 1000);

    // }, 1500);

}

const addControl = () => {
    mapApi.control.screenControl(map)
    mapApi.control.scaleControl(map)
    mapApi.control.navControl(map)
}

const change = (type) => {
    if (type === 2) {
        map.setProjection("globe");
    } else if (type === 3) {
        // map.setProjection("mercator");
        let modelData = [
            {
                id: 'tst1',
                name: 'tst1',
                epoch: 0,// 起始时间
                model: {
                    img: '',  // 图片路径
                    scale: 0.5,
                    type: ''
                },
                position: {
                    coordinate: [],
                    time: [],
                    information: []
                }
            }
        ]
        FileManager.analysisCSV(getAssets('data/csv/B3435_20241109_02.csv')).then(res => {
            res.forEach((item) => {
                modelData[0].position.coordinate.push([item[4], item[5], item[6]])
                modelData[0].position.time.push(new Date(item[2] + " " + item[3]).getTime())
                modelData[0].position.information.push({})
            })
            console.log(modelData);
            modelData[0].epoch = modelData[0].position.time[0]
            const czml = {
                id: 'document',  // czml标识 / 数据标识
                clock: {
                    interval: `${modelData[0].position.time[0]}/${modelData[0].position.time[modelData[0].position.time.length - 1]}`,  // 时间区间 "开始时间戳/结束时间戳"
                    currentTime: `${modelData[0].position.time[0]}`, //  当前时间 时间戳
                    multiplier: '1', // 播放 速度  默认为1
                    loopPlayback: 0 // 0循环 1 不循环
                },
                data: modelData
            }
            mapApi.modelMove.callPlayBackLoadModell(czml)

            mapStores.setTime({
                startTime: czml.clock.interval.split('/')[0],
                endTime: czml.clock.interval.split('/')[1]
            })
        })
    }
}

const onLayerChange = (layerId) => {
    switch (layerId) {
        case 'map':
            mapApi.style.setStyle('streets-v12')
            break
        case 'satellite':
            mapApi.style.setStyle('satellite-v9')
            break
        case 'terrain':
            mapApi.style.setStyle('terrain-v2')
            break
    }
}
</script>

<style scoped lang="scss">
#mapbox_container {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 1);
    position: relative;
}

::v-deep .mapboxgl-popup-content {
    background: none !important;
    border: none !important;
    outline: none !important;
}

// .mapboxgl-ctrl {
//     display: none !important;
// }

// //或隐藏不了
// //加入/deep/
// ::v-deep .mapboxgl-ctrl {
//     display: none !important;
// }

.calculation-box {
    height: 75px;
    width: 150px;
    position: absolute;
    bottom: 40px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px;
    text-align: center;
}

p {
    font-family: 'Open Sans';
    margin: 0;
    font-size: 13px;
}

/* 线段样式 */
::v-deep .mapbox-gl-draw_line {
    stroke-width: 8px;
    /* 加粗线段 */
    stroke: #3bb2d0;
}

/* 节点圆点样式 */
::v-deep .node-marker {
    width: 26px;
    /* 增大节点圆点 */
    height: 26px;
    background: #ff5722;
    border-radius: 50%;
    border: 2px solid white;
}

/* 起点提示样式 */
::v-deep .start-marker {
    background: white;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* 距离标记样式 */
::v-deep .distance-marker {
    background: white;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}
</style>
